<template>
  <k-view :class="['stock-score-tabs', riskArr.length ? 'has-risk' : '']">
    <k-view
      :class="['tab-item', modelValue == tab.index ? 'theme-bg-red' : 'bg-bar']"
      v-for="tab in scoreDetailList"
      :key="tab.id"
      @click="changeTab(tab)"
    >
      <k-text
        :class="[
          'tab-item-text',
          modelValue == tab.index ? 'active' : '',
          modelValue == tab.index ? 'theme-text-title' : 'theme-text-content',
        ]"
        ><span class="name">{{ tab.name }}</span
        ><span class="risk" v-if="riskArr.length"
          >风险:<span>{{ getNum(tab.key) }}</span></span
        ></k-text
      >
    </k-view>
  </k-view>
</template>

<script>
import { scoreDetailList } from '../../scripts/scoreDetail';
export default {
  props: {
    // 选中的tab的index
    modelValue: {
      type: Number,
      default: 1,
    },
    riskArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      scoreDetailList,
    };
  },
  methods: {
    changeTab(tab) {
      this.$emit('change', tab.index, tab.name);
    },
    getNum(key) {
      const tabOptions = this.riskArr.find(item => item.key === key);
      const num = tabOptions?.num;
      if (num || num === 0) {
        return num;
      } else {
        return '--';
      }
    },
  },
};
</script>

<style lang="less">
.stock-score-tabs {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;

  .tab-item {
    margin-right: 24px;
    padding: 16px 24px 10px 24px;
    border-radius: 8px;
    position: relative;

    .tab-item-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      white-space: nowrap;

      .risk {
        font-size: 24px;

        span {
          color: #ff2436;
        }
      }
    }

    .theme-text-title {
      color: #ff2436;
      font-size: 28px;
    }

    .theme-text-content {
      font-size: 28px;
      color: #262626;
    }
  }

  .bg-bar {
    background-color: rgba(216, 216, 216, 0.3);
  }

  .theme-bg-red {
    background-color: rgba(255, 36, 54, 0.08);
  }
}

.has-risk {
  .theme-bg-red {
    &::after {
      position: absolute;
      content: '';
      border-top: 16px solid rgba(255, 36, 54, 0.08);
      border-left: 16px solid transparent;
      border-right: 16px solid transparent;
      border-bottom: 16px solid transparent;
      left: calc(50% - 16px);
      bottom: -31px;
    }
  }
}

[theme-mode='black'] {
  .stock-score-tabs {
    .theme-text-content {
      color: rgba(255, 255, 255, 0.84);
    }

    .bg-bar {
      background-color: rgba(255, 255, 255, 0.06);
    }

    .theme-bg-red {
      background-color: rgba(255, 36, 54, 0.08);
    }
  }
}
</style>
